import React, {useState} from 'react';
import axios from 'axios';
import {history} from 'umi';
import {Button, Input} from 'antd';
import './login.css';


const LoginPage = () => {
    const [phone, setPhone] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        try {
            const response = await axios.post('/api/user/login', {
                phone,
                password
            });
            if (response.data.code == 200) {
                localStorage.setItem('token', response.data.token);
                history.push('/userhome');
            }
        } catch (error: any) {
            console.error('登录失败：', error);
            alert('登录失败，请检查网络连接或用户名密码是否正确');
        }
    };
    const handleGoBack = () => {
        history.back();
    };
    return (
        <div className="login-container">
            <Input
                type="text"
                placeholder="手机号"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                className="input-field"
            />
            <Input
                type="password"
                placeholder="密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="input-field"
            />
            <Button type="primary" onClick={handleLogin} className="login-button">登录</Button>
            <Button type="primary" onClick={handleGoBack} className="back-button">返回</Button>
        </div>
    );
};
export default LoginPage;
